<template>
    <div class="font-size-30 height-100 width-100 flex flex-direction-column">
        <zt-table-page ref="tableRef" :searchColumns="searchFormDataDirectory" :tableColumns="directoryColumnsData"
            :api="apiGetMenuList" :moreOperations="operationsConfig">
            <template #topRight>
                <el-row class="mb-4">
                    <el-button type="primary" :icon="Plus" @click="handerCreateDirectory">新增目录</el-button>
                </el-row>
            </template>
            <template #builtin="{ row }">
                <el-tag v-if="row.builtin">内置</el-tag>
                <el-tag v-if="!row.builtin" type="warning">非内置</el-tag>
            </template>
            <template #scope="{ row }">
                {{ row.scope == 'master' ? '系统' : '租户' }}
            </template>
            <template #moreColumn="{ row, index }">
                <el-button size="small" type="success" @click.stop="handleView(row)">查看菜单</el-button>
                <el-button size="small" type="primary" @click.stop="handleEdit(row)">修改</el-button>
                <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
            </template>
        </zt-table-page>
        <add-directory-dialog v-model="showVisible" :currentType="currentType" :objectValue="objectValue"
            @success="handerReload" />
    </div>
</template>

<script  setup>
import { ElMessageBox, ElMessage, ElNotification } from 'element-plus'
import { apiGetMenuList, apiDeleteDirectory } from "@/api/admin/menuManage/api.js"
import { directoryColumnsData, searchFormDataDirectory } from "./configData.js"
import addDirectoryDialog from "./components/add-directory-dialog.vue"
import { useStore } from "@/store/index";
const router = useRouter();
const store = useStore();
// 更多列配置信息
const operationsConfig = {
    title: '操作', //标题
    align: 'center',//居中方式
    width: '250',//宽度
    fixed: 'right',//固定定位方向
}
const currentType = ref('add') //当前操作类型
const showVisible = ref(false)
const objectValue = ref({})

// 新增目录
function handerCreateDirectory() {
    showVisible.value = true
}

// 修改菜单
function handleEdit(row) {
    currentType.value = 'edit';
    showVisible.value = true
    objectValue.value = row
}

const tableRef = ref(null)
// 重新加载 表格数据
async function handerReload() {
    tableRef.value.reload() //调用父组件里面的重载方法
}

// 查看菜单按钮
function handleView(e) {
    store.setParams({ catalogId: e.catalogId, catalogName: e.catalogName })
    // 跳转到菜单列表
    router.push('/menuList')
}

// 删除目录
const handleDelete = (row) => {
    ElMessageBox.confirm(`你是否确认删除“${row.catalogName}”目录 ? 删除后不可撤回`)
        .then(() => {
            apiDeleteDirectory({ catalogId: row.catalogId }, '目录删除中').then(res => {
                if (res.success) {
                    ElMessage({
                        message: '目录删除成功',
                        type: 'success',
                    })
                    handerReload()
                    return false
                }
                ElMessage({
                    message: res.message,
                    type: 'warning',
                })
            })
        })
}

</script>

<style lang='scss' scoped></style>